import React from 'react';
import {Form, Select} from "antd";
import {diffProps} from "../../libs/funcs";


/**
 * 下拉选择框
 */
class FormCascadingSelects extends React.Component{
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        /**
         * options 传一个对象 {key:value}
         */
        const {label,field,initialValue,rules,options,allowClear,showSearch,placeholder,disabled} = this.props;
        const new_props = diffProps(this.props,["label","form","field","initialValue","rules","options","allowClear","showSearch","placeholder"]);
        const { Option } = Select;
        return (
            <Form.Item label={label ? label : "下拉选择框"} disabled={disabled}>
                {getFieldDecorator(field ? field : "default_select", {initialValue: initialValue,rules: rules ? rules : []})(
                    <Select
                        showSearch={showSearch ? showSearch : true}
                        allowClear={allowClear ? allowClear : true}
                        placeholder={placeholder ? placeholder : "请选择..."}
                        {...new_props}
                    >
                        {
                            Object.keys(options ? options : {}).map(key => (
                                <Option key={key} value={key}>{options[key]}</Option>
                            ))
                        }
                    </Select>
                )}
            </Form.Item>
        );
    }
}

// const FormCascadingSelects = () => {
//     const [selectedValues, setSelectedValues] = useState([]);
//
//     const handleSelectChange = (value, index) => {
//         const newSelectedValues = selectedValues.slice(0, index);
//         newSelectedValues.push(value);
//         setSelectedValues(newSelectedValues);
//     };
//
//     const renderSelect = (options, index) => {
//         return (
//             <Select style={{ width: 200 }} onChange={(value) => handleSelectChange(value, index)}>
//                 {options.map((option) => (
//                     <Option key={option} value={option}>
//                         {option}
//                     </Option>
//                 ))}
//             </Select>
//         );
//     };
//
//     const renderTree = (data, depth) => {
//         const selectedValue = selectedValues[depth];
//
//         if (!selectedValue) {
//             return null;
//         }
//
//         const children = data[selectedValue];
//
//         if (!children) {
//             return null;
//         }
//
//         return (
//             <>
//                 {renderSelect(children, depth + 1)}
//                 {renderTree(data, depth + 1)}
//             </>
//         );
//     };
//
//     return (
//         <div>
//             {renderSelect(Object.keys(treeData), 0)}
//             {renderTree(treeData, 0)}
//         </div>
//     );
// };

export default FormCascadingSelects;